<template>
	<div class="pay-box">
		<div class="address-box">
			<van-cell value="选择收货地址" is-link @click="isShow = true" />
			<div class="user-box">
				<div class="user-box__info">
					<div class="info_name">{{current_address.name}}</div>
					<div class="info_phone">{{current_address.tel}}</div>
				</div>
				<div class="user-box__address">
					<div class="tag" v-if="current_address.isDefault">默认</div>
					<div class="default_address">{{current_address.address}}</div>
				</div>
			</div>
		</div>
		<div class="order-box">
			<order-list titleLeft="订单信息" :item="info">
				<div v-for="(item,index) in product" :key="index">
					<order-card :card="item" />
				</div>
			</order-list>
		</div>
		<div class="btn-box">
			<van-button block type="info" round @click="pay">提交</van-button>
		</div>
		<!-- 弹出层 -->
		<van-popup 
			v-model="isShow" 
			position="bottom"
			round
			closeable
			lazy-render
		>
		<van-address-list
		  v-model="check_address"
		  :list="address_list"
		  default-tag-text="默认"
		  @add=""
		  @edit=""
			@select="select_address"
		/>
		</van-popup>
	</div>
</template>

<script>
	import {
		getAddress,
		getCommitShopCart,
		pay
	} from '@/api/order.js'
	import orderList from '@/components/orderlist.vue'
	import orderCard from '@/components/ordercard.vue'
	import bus from '@/utils/eventBus.js'
	export default {
		data () {
			return {
				// 地址数据数组
				address_list: [],
				// 当前选中地址数据对象
				current_address: {},
				// 当前选中地址id
				check_address: '',
				// 显示隐藏弹出层
				isShow: false,
				// 商品sids数组
				sids: [],
				// 订单数量价格时间
				info: {
					count: 0,
					total: 0,
					date: '2021年2月15日13:09:22'
				},
				// 商品信息数组
				product: []
			}
		},
		created() {
			this._getAddress()
			// 获取商品sid
			this.sids = this.$route.query.sids.split('-')
			// 获取订单商品信息
			this._getShopCartBySids()
		},
		// 路由缓存
		activated() {
			// 获取商品sid
			this.sids = this.$route.query.sids.split('-')
			
			if (this.keepAlive) {
				// 获取订单商品信息
				this._getShopCartBySids()
			}
		},
		methods: {
			// 获取地址
			_getAddress() {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({ name: "Login" })
				// 发起请求
				getAddress({
					tokenString
				})
				.then(({data: res}) => {
					console.log('查询地址',res)
					if (res.code !== 20000) return this.$toast.fail('请求异常,请重新尝试!')
					// 遍历数据
					res.result.forEach(item => {
						item.isDefault = Boolean(item.isDefault) //转换为布尔值
						item.id = item.aid
						item.address = `${item.province}${item.city}${item.county}${item.addressDetail}`
						// 获取默认地址
						if (item.isDefault) {
							this.check_address = item.aid
							this.current_address = item
						}
					})
					this.address_list = res.result
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 切换地址
			select_address (item) {
				this.current_address = item
				this.isShow = false
			},
			// 获取商品信息
			_getShopCartBySids () {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$route.push({name: 'Login'})
				// 发起请求
				getCommitShopCart({
					tokenString,
					sids: JSON.stringify(this.sids)
				})
				.then(({data:res}) => {
					console.log('获取提交订单购物车数据',res)
					this.keepAlive = true
					if (res.code !== 50000) return this.$toast.fail('请求异常,请重新尝试!')
					// 遍历数据获取订单价格数量时间
					res.result.forEach(item => {
						this.info.count += item.count
						this.info.total += item.count * item.price
						this.info.date = item.created_at
					})
					this.product = res.result
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 提交订单
			async pay() {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({ name: "Login" })
				if (!this.check_address) return this.$toast('未选择收货地址')
				// 提示
				const resultConfirm = await this.$dialog.confirm({
					title: "确认订单",
					message: "立即结算"
				}).catch(err => err)
				if(resultConfirm !== 'confirm') return this.$toast('取消结算')
				// 加载中
				this.$toast.loading({
					message: '加载中...',
					forbidClick: true
				})
				// 发起请求
				pay({
					tokenString,
					sids: JSON.stringify(this.sids),
					phone: this.current_address.tel,
					address: this.current_address.address,
					receiver: this.current_address.name
				})
				.then(({data:res}) => {
					console.log('提交订单',res)
					if (res.code !== 60000) return this.$toast.fail('请求异常,请重新尝试!')
					this.$toast.success(res.msg)
					// 通知购物车刷新数据
					bus.$emit('refresh-shop-cart')
					setTimeout(() => {
						this.$router.replace({ name: "Order" })
					},500)
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			}
		},
		components: {
			orderList,
			orderCard
		}
	}
</script>

<style lang="scss" scoped>
	.pay-box{
		padding: 10px 15px 90px;
		.address-box{
			background-color: #fff;
			border-radius: 10px 0 10px 0;
			overflow: hidden;
			/deep/ .van-cell {
				padding: 10px 10px 5px 10px;
			}
			.user-box{
				padding: 10px;
				.user-box__info{
					display: flex;
					> div{
						font-size: 18px;
						font-weight: bold;
					}
					.info_phone{
						margin-left: 10px;
					}
				}
				.user-box__address{
					margin-top: 10px;
					line-height: 20px;
					.tag{
						float: left;
						height: 20px;
						width: 40px;
						text-align: center;
						color: #fff;
						background-color: skyblue;
						border-radius: 10px;
						font-weight: bold;
						font-size: 12px;
						margin-right: 10px;
					}
					.default_address{
						font-size: 16px;
						word-break: break-all;
					}
				}
			}
		}
		/deep/ .van-address-list{
			.van-address-item{
				.van-radio__icon--checked{
					.van-icon {
						background-color: #3498db;
						border: #3498db;
					}
				}
				.van-tag--danger{
					background-color: #3498db;
				}
			}
			.van-address-list__bottom{
				.van-button--danger{
					background-color: #3498db;
					border-color: #3498db;
				}
				bottom: 5px;
			}
		}
		.btn-box{
			position: fixed;
			bottom: 25px;
			left: 50%;
			transform: translateX(-50%);
			width: calc(100% - 40px);
		}
	}
</style>